<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>layui-demo</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<link rel="stylesheet" ref="font-awesome-4.7.0/css/font-awesome.css" />

<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
	<div>
		<!-- 修改信息 -->
		<div id="editFormDiv" style="display: none">
			<form class="layui-form" action="" lay-filter="example">
				<div class="layui-form-item">
					<label class="layui-form-label">电影编号</label>
					<div class="layui-input-block">
						<input type="text" name="movieid" id="movieid" lay-verify="title"
							autocomplete="off" readonly class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">电影名称</label>
					<div class="layui-input-block">
						<input type="text" name="moviename" id="moviename"
							lay-verify="title" autocomplete="off" placeholder="请输入电影名称"
							class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">地区</label>
					<div class="layui-input-block">
						<select class="layui-select" id="place" name="place"></select>
					</div>
				</div>
				<div class="layui-form-item layui-form-text">
					<label class="layui-form-label">语言</label>
					<div class="layui-input-block">
						<select class="layui-select" id="language" name="language"></select>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">主演</label>
					<div class="layui-input-block">
						<input type="text" name="mainactor" id="mainactor"
							lay-verify="title" autocomplete="off" placeholder="请输入主演名"
							class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">导演</label>
					<div class="layui-input-block">
						<input type="text" name="director" id="director"
							lay-verify="title" autocomplete="off" placeholder="请输入导演名"
							class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">上映时间</label>
					<div class="layui-input-block">
						<input type="date" name="releasedate" id="releasedate"
							lay-verify="title" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">时长</label>
					<div class="layui-input-block">
						<input type="number" name="duration" id="duration"
							lay-verify="title" autocomplete="off" placeholder="请输入电影时长，单位分钟"
							class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">电影简介</label>
					<div class="layui-input-block">
						<textarea placeholder="请输入内容" class="layui-textarea"
							name="movieinfo" id="movieinfo"></textarea>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">电影票价</label>
					<div class="layui-input-block">
						<input type="text" name="moviepirce" id="moviepirce"
							lay-verify="title" autocomplete="off" placeholder="请输入票价"
							class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">状态</label>
					<div class="layui-input-block">
						<select class="layui-select" name="moviestatus" id="moviestatus">
							<option value="1">上映中</option>
							<option value="2">已下架</option>
							<option value="3">即将上映</option>
							<option value="4">已禁播</option>
						</select>
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<button class="layui-btn btn-update" type="button" lay-submit=""
							lay-filter="demo1">立即提交</button>
					</div>
				</div>
			</form>
		</div>
		<!-- 增加信息 -->
		<div id="addFormDiv" style="display: none; padding: 20px 30px 0 0;">
			<form class="layui-form" action="" lay-filter="example">
				<div class="layui-form-item">
					<label class="layui-form-label">电影名称</label>
					<div class="layui-input-block">
						<input type="text" name="amoviename" id="amoviename"
							lay-verify="title" autocomplete="off" placeholder="请输入电影名称"
							class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">地区</label>
					<div class="layui-input-block">
						<select class="layui-select" id="aplace" name="aplace"></select>
					</div>
				</div>
				<div class="layui-form-item layui-form-text">
					<label class="layui-form-label">语言</label>
					<div class="layui-input-block">
						<select class="layui-select" id="alanguage" name="alanguage"></select>	
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">主演</label>
					<div class="layui-input-block">
						<input type="text" name="amainactor" id="amainactor"
							lay-verify="title" autocomplete="off" placeholder="请输入主演名"
							class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">导演</label>
					<div class="layui-input-block">
						<input type="text" name="adirector" id="adirector"
							lay-verify="title" autocomplete="off" placeholder="请输入导演名"
							class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">上映时间</label>
					<div class="layui-input-block">
						<input type="date" name="areleasedate" id="areleasedate"
							lay-verify="title" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">时长</label>
					<div class="layui-input-block">
						<input type="number" name="aduration" id="aduration"
							lay-verify="title" autocomplete="off" placeholder="请输入电影时长，单位分钟"
							class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">电影简介</label>
					<div class="layui-input-block">
						<textarea placeholder="请输入内容" class="layui-textarea"
							name="amovieinfo" id="amovieinfo"></textarea>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">电影票价</label>
					<div class="layui-input-block">
						<input type="text" name="amoviepirce" id="amoviepirce"
							lay-verify="title" autocomplete="off" placeholder="请输入票价"
							class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">状态</label>
					<div class="layui-input-block">
						<select class="layui-select" name="amoviestatus" id="amoviestatus">
							<option value="1">上映中</option>
							<option value="2">已下架</option>
							<option value="3">即将上映</option>
							<option value="4">已禁播</option>
						</select>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">图片</label>
					<div class="layui-upload">
						<button type="button" class="layui-btn" id="test1">上传图片</button>
						<div id="uploadLoadingDiv" style="margin-left:100px;margin-top:10px;">
							<div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="demoprogress">
	 								<div class="layui-progress-bar" lay-percent="0%"></div>
							</div>
						</div>
					</div>
					<div class="layui-upload-list">
						<img class="layui-upload-img" id="demo1" width="100px"
							height="100px" style="margin-left: 110px">
						<p id="demoText"></p>
					</div>
					<button type="button" class="layui-btn" id="test9"
						style="margin-left: 110px">添加</button>
				</div>
			</form>
		</div>
		<!-- 电影类型信息 -->
		<div id="typeFormDiv" style="display: none; padding: 20px 30px 0 0;">
			<form class="layui-form" action="" lay-filter="testcheck">
				<input type="hidden" id="mymovieid">
				<div class="layui-form-item">
					<label class="layui-form-label">类型</label>
					<div class="layui-input-block" id="mytype"></div>
				</div>
				<div class="layui-form-item">
					<button type="button" class="layui-btn" id="typeclass"
						style="margin-left: 110px">确定</button>
				</div>
			</form>
		</div>
		<!-- 修改视频信息 -->
		<div id="movieFormDiv" style="display: none; padding: 20px 30px 0 0;">
			<form class="layui-form" action="" lay-filter="">
				<input type="hidden" id="mymoviename" name="mymoviename">
				<input type="hidden" id="mymovieid" name="mymovieid">
				<div class="layui-form-item">
					<label class="layui-form-label">视频</label>
					<div class="layui-upload">
						<button type="button" class="layui-btn" id="test2">选择视频</button><span id="videotime"></span>
						<div id="uploadLoadingDiv" style="margin-left:100px;margin-top:10px;margin-bottom:10px;">
							<div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="demo2progress">
	 							<div class="layui-progress-bar" lay-percent="0%"></div>
							</div>
						</div>
						<div class="layui-form-item" >
							<video id="videoattr" width="350" height="200" style="border:1px solid black;margin-left:105px;width: 565px;height: 250px;"></video>
						</div>
						<button type="button" class="layui-btn" id="test4" style="margin-left: 110px;visibility:hidden;">上传</button>
						
						<div class="layui-form-item" >
							<label class="layui-form-label">已有预告片</label>
							<embed id="videoattr2" width="350" height="200" style="margin-left:105px;width: 565px;height: 250px;"></embed>
						</div>
					</div>
				</div>
			</form>
		</div>
		<!-- 修改图片信息 -->
		<div id="moviepicFormDiv" style="display: none; padding: 20px 30px 0 0;">
			<div class="layui-form-item">
				<input type="hidden" id="picmovieid" name="picmovieid">
				<input type="hidden" id="picmoviename" name="picmoviename">
				<label class="layui-form-label">图片</label>
				<div class="layui-upload">
					<button type="button" class="layui-btn" id="test3">修改图片</button>
					<div id="uploadLoadingDiv" style="margin-left:100px;margin-top:10px;">
						<div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="demo3progress">
							<div class="layui-progress-bar" lay-percent="0%"></div>
						</div>
					</div>
				</div>
				<div class="layui-upload-list">
					<img class="layui-upload-img" id="demo3" name="demo3" width="100px" height="100px" style="margin-left: 110px">
					<p id="demoText"></p>
				</div>
				<button type="button" class="layui-btn" id="test5" style="margin-left: 110px">修改</button>
			</div>
		</div>
		<div>
			<!-- 内容主体区域 -->
			<div style="padding: 15px">
				<div class="demoTable">
					<select class="layui-select" id="select"></select>
					<div class="layui-inline">
						<input class="layui-input" name="id" id="demoReload"
							autocomplete="off">
					</div>
					<button class="layui-btn" data-type="reload">搜索</button>
				</div>
				<table class="layui-hide" id="test" lay-filter="test"></table>
			</div>
			
		</div>
	</div>


	<script type="text/html" id="toolbarDemo">
  	<div class="layui-btn-container">
 		<button class="layui-btn layui-btn-sm" lay-event="AddMovie">添加电影</button>
  	</div>
	</script>

	<script type="text/html" id="barDemo">
  		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
		<a class="layui-btn layui-btn-xs" lay-event="type">类型</a>
		<a class="layui-btn layui-btn-xs" lay-event="movie">视频</a>
	</script>
	<script type="text/html" id="imgTpl">
		<img src="{{ d.moviepicture }}">
	</script>
	<style type="text/css">
		.layui-table-cell {
			height: auto;
			line-height: 140px;
		}
	</style>


	<script src="layui/layui.js" charset="utf-8"></script>
	<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
	<script type="text/javascript" src="js/jquery-2.0.3.js"></script>

	<script type="text/javascript">
		var mPro = [ "电影名", "地区", "语言", "主演", "导演", "简介" ];
		$.each(mPro, function(i, o) {
			$("#select").append("<option value = "+o+">" + o + "</option>")
		})
	</script>

	<script type="text/javascript">
		$(function() {
			$.post("Country", function(data) {
				$.each(data, function(i, o) {
					$("#aplace").append("<option value = "+o.title+">" + o.title+ "</option>");
				})
			})
			
			$.post("Language",function(data){
				$.each(data,function(i,o){
					$("#alanguage").append("<option value = "+o.title+">" + o.title+ "</option>");
				})
			})
		})
	</script>

	<script type="text/javascript">
		$(function() {
			$.post("Country", function(d) {
				$.each(d, function(i, o) {
					$("#place").append("<option value="+o.title+">" + o.title+ "</option>");
				})
			})
			
			$.post("Language",function(d){
				$.each(d,function(i,o){
					$("#language").append("<option value = "+o.title+">" + o.title+ "</option>");
				})
			})
		})
	</script>

	<script>
		layui.use('table',function() {
			var table = layui.table;
			table.render({
				elem : '#test',
				url : 'Movie',//地址和springmvc中控制器地址一致
				toolbar : '#toolbarDemo',
				title : '电影表',
				width : 1680,
				height : 700,
				cols : [ [
						{
							type : 'checkbox',
							fixed : 'left'
						},
						{
							field : 'movieid',
							title : '电影编号',
							width : 110,
							fixed : 'left',
							unresize : true,
							sort : true
						},
						{
							field : 'moviename',
							title : '电影名称',
							width : 120
						},
						{
							field : 'place',
							title : '地区',
							width : 120,
						},
						{
							field : 'language',
							title : '语言',
							width : 120
						},
						{
							field : 'mainactor',
							title : '主演',
							width : 120
						},
						{
							field : 'director',
							title : '导演',
							width : 120
						},
						{
							field : 'releasedate',
							title : '上映时间',
							width : 130,
							templet : '<div>{{ layui.util.toDateString(d.releasedate, "yyyy-MM-dd") }}</div>',
							sort : true
						},
						{
							field : 'duration',
							title : '时长',
							width : 120,
							sort : true
						},
						{
							field : 'movieinfo',
							title : '电影简介',
							width : 120
						},
						{
							field : 'moviepirce',
							title : '电影票价',
							width : 120,
							sort : true
						},
						{
							field : 'moviepicture',
							title : '电影图片',
							width : 120,
							templet : "#imgTpl"
						},
						{
							field : 'moviestatus',
							title : '状态',
							width : 80,
							templet : function(d) {
								if (d.moviestatus == 1) {
									return '上映中';
								} else if(d.moviestatus == 2){
									return '已下架';
								} else if(d.moviestatus == 3){
									return '即将上映';
								} else if(d.moviestatus == 4){
									return '已禁播';
								}
							}
						}, {
							fixed : 'right',
							title : '操作',
							toolbar : '#barDemo',
							width : 200
						} ] ],
				page : true,
				id : 'testReload'
			});

			//头工具栏事件
			table.on('toolbar(test)', function(obj) {
				var checkStatus = table
						.checkStatus(obj.config.id);
				switch (obj.event) {
				case 'AddMovie':
					layer.open({
						type : 1//弹出层 div
						,
						area : [ '800px', '530px' ],
						shade : 0.6,
						id : 'LAY_layuipro1' //设定一个id，防止重复弹出
						,
						//content : $("#editFormDiv").html(),
						content : $("#addFormDiv"), //后面不用.html()

					});
				}
			});

			//监听行工具事件
			table.on('tool(test)',function(obj) {
				var data = obj.data;
				//console.log(obj)
				if (obj.event === 'edit') {
					//先给我们的表单元素赋值
					$("#movieid").attr("value",data.movieid);
					$("#moviename").attr("value",data.moviename);
					$("#place").find("option[value="+ data.place+ "]").prop("selected",true);
					$("#language").find("option[value="+data.language+"]").prop("selected",true);
					$("#mainactor").attr("value",data.mainactor);
					$("#director").attr("value",data.director);
					var retime = new Date(
							data.releasedate);
					var year = retime
							.getFullYear();
					var month = retime
							.getMonth() + 1;
					var day = retime.getDate();
					if (month < 10) {
						month = "0" + month;
					}
					if (day < 10) {
						day = "0" + day;
					}
					var commonTime = year+"-"+ (month) + "-"+(day);
					console.log(commonTime);
					$("#releasedate").attr("value",commonTime);
					$("#duration").attr("value",data.duration);
					$("#movieinfo").val(data.movieinfo);
					$("#moviepirce").attr("value",data.moviepirce);
					$("#moviestatus").find("option[value="+data.moviestatus+"]").prop("selected",true);
					layer.open({
						type : 1//弹出层 div
						,
						area : ['700px','600px' ],
						shade : 0.6,
						id : 'LAY_layuipro2' //设定一个id，防止重复弹出
						,
						//content : $("#editFormDiv").html(),
						content : $("#editFormDiv"), //后面不用.html()

					});
					//表单的render
					layui.form.render();

				} else if (obj.event === 'type') {

					$("#mymovieid").attr("value",data.movieid);
					$("input[type='checkbox']").prop("checked",false);
					$.post("typeByMid/"+ data.movieid,function(data) {
						$.each(data,function(i,o) {
							$("input[value='"+ o.typeid+ "']").prop("checked",true);
							layui.form.render('checkbox');
						})
					})
					layer.open({
						type : 1//弹出层 div
						,
						area : [
								'550px',
								'400px' ],
						shade : 0.6,
						id : 'LAY_layuipro3' //设定一个id，防止重复弹出
						,
						//content : $("#editFormDiv").html(),
						content : $("#typeFormDiv"), //后面不用.html()

					});
					layui.form.render();
				} else if (obj.event === 'movie') {
					$("#videoattr").attr("src","");
					console.log("视频："+data.moviename);
					$("#mymoviename").attr("value",data.moviename);
					$("#mymovieid").attr("value",data.movieid);
					$("#videoattr2").attr("src",data.movievideo);
					layer.open({
						type : 1//弹出层 div
						,
						area : ['700px','600px' ],
						shade : 0.6,
						id : 'LAY_layuipro4' //设定一个id，防止重复弹出
						,
						content : $("#movieFormDiv") //后面不用.html()

					});
				}
			});
			
			 table.on('rowDouble(test)', function(obj){
			    var data = obj.data;
			    $("#picmovieid").attr("value",data.movieid);
			    $("#picmoviename").attr("value",data.moviename);
			    layer.open({
			    	type : 1,
			    	area : ['400px','400px'],
			    	shade : 0.6,
			    	id : 'LAY_layuipro5',
			    	content : $("#moviepicFormDiv")
			    });
			    //标注选中样式
			    obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
			  });

			/*表格数据重载 模糊检索*/
			var $ = layui.$, active = {
				reload : function() {
					var demoReload = $('#demoReload');
					var select = $("#select");
					//执行重载
					table.reload('testReload', {
						page : {
							curr : 1
						//重新从第 1 页开始
						},
						where : {
							key : demoReload.val(),
							select : select.val()
						}
					});
				}
			};

			$('.demoTable .layui-btn').on('click', function() {
				var type = $(this).data('type');
				active[type] ? active[type].call(this) : '';
			});

			//监听提交  新增加的代码  监听2
			layui.form.on('submit(demo1)',function(data) {
				console.log(JSON.stringify(data.field));
				//ajax请求实现访问控制器
				$.ajax({
					type : "put", //提交方式
					url : "updmovie", ////地址和springmvc中控制器地址一致
					data : JSON.stringify(data.field), //提交给控制器的数据
					contentType : "application/json", //提交给控制的数据 格式
					success : function(cm) {
						layer.msg(cm.msg,{
							time : 2000
						//两秒延迟
						},
						function() {
							if (cm.msg == "修改成功") {
								location.replace(location.href);
							}
						});
					}
				});
				return false;
			});
		});
	</script>
	<!-- 添加电影 -->
	<script type="text/javascript">
		layui.use(['upload','element','layer'],function() {
			var upload = layui.upload,element = layui.element,layer = layui.layer;

			//普通图片上传
			var uploadInst = upload.render({
				elem : '#test1',
				url : 'addMovie' //改成您自己的上传接口
				,
				accept : 'image',
				field : 'upload',
				auto : false,
				bindAction : '#test9',
				xhr : xhrOnProgress,
				progress : function(value) {//上传进度回调 value进度值
					console.log("进度" + value);
					element.progress('demoprogress',value + '%')//设置页面进度条
				},
				before : function(obj) {
					this.data = {
						moviename : $("#amoviename").val(),
						place : $("#aplace").val(),
						language : $("#alanguage").val(),
						mainactor : $("#amainactor").val(),
						director : $("#adirector").val(),
						mdate : $("#areleasedate").val(),
						duration : $("#aduration").val(),
						movieinfo : $("#amovieinfo").val(),
						moviepirce : $("#amoviepirce").val(),
						moviestatus : $("#amoviestatus").val()
					}
				},
				choose : function(obj) {
					//预读本地文件示例，不支持ie8
					obj.preview(function(index,file, result) {
						$('#demo1').attr('src',result); //图片链接（base64）
					});
				},
				done : function(data) {
					//如果上传失败
					layer.msg(data.msg);
					if (data.code == 200) {
						setTimeout(function() {
							location.replace(location.href);
						}, 1000);
					}
					//上传成功
				},
				error : function() {
					//演示失败状态，并实现重传
					var demoText = $('#demoText');
					demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
					demoText.find('.demo-reload').on('click', function() {uploadInst.upload();});
				}
			});

		})
	</script>
	<!-- 电影类型表 -->
	<script type="text/javascript">
		$.post("AllType",function(data) {
			$.each(data,function(i, o) {
				$("#mytype").append("<input type='checkbox' name='checkboxtype' title="+o.mtypename+" value="+o.mtypeid+">")
			})
		})
	</script>
	<!-- 电影类型选择 -->
	<script type="text/javascript">
		$("#typeclass").click(function() {
			var mymovieid = $("#mymovieid").val();
			var typelist = [ mymovieid ];
			$("input[name='checkboxtype']:checked").each(function() {
				typelist.push($(this).val());
			})
			console.log(typelist);
			$.ajax({
				type : "post",
				url : "typeclass",
				data : JSON.stringify(typelist),
				contentType : "application/json",
				dataType : "json",
				success : function(data) {
					layer.msg(data.msg);
					if (data.code == 200) {
						setTimeout(function() {
							location.replace(location.href);
						}, 1000);
					}
				}
			})
		})
	</script>
	<!-- 视频上传 -->
	<script type="text/javascript">
	layui.use(['upload','element','layer'],function() {
		var upload = layui.upload,element = layui.element,layer = layui.layer;
		
		var demoCount=0,demoFlag=false;
		//视频上传
		var uploadInst = upload.render({
			elem : '#test2',
			url : 'addVideo' //改成您自己的上传接口
			,
			accept : 'video',
			field : 'videoupload',
			auto : false,
			bindAction : '#test4',
			data : {
				moviename : function(){
					return $("#mymoviename").val();
				},
				movieid : function(){
					return $("#mymovieid").val();
				}
			},
			xhr : xhrOnProgress,
			progress : function(value) {//上传进度回调 value进度值
				if(demoFlag){
	                console.log(demoCount)
	                element.progress('demo2progress', value + '%') //设置页面进度条
	            }
			},
			before : function(obj) {
				obj.preview(function (index, file, result) {
	                layer.closeAll('loading'); //关闭loading
	                demoCount++
	                console.log('before',demoCount);
	                var size = file.size / 1024 / 1024;
	                if(size<=1){
	                    size=keepTwoDecimal(size*1024)+'KB'
	                }else{
	                    size=keepTwoDecimal(size)+'MB'
	                }
	                demoFlag=true
	            })
			},
			choose:function(obj){
		        //预读本地文件示例，不支持ie8
		        layer.load(2);
		        obj.preview(function(index, file, result){
		            var url = URL.createObjectURL(file);//把file转成URL
		            $('#videoattr').attr('src', url); //视频链接
		            var timer = setTimeout(function(){
		                layer.close(layer.index);
		                var video_time = document.getElementById("videoattr").duration;//视频时长
		                console.log(video_time);
		                if(video_time>60){
		                    layer.msg('上传视频不能超过60秒', {icon: 2})
		                }else{
		                    $('#test4').css("visibility","visible"); //一开始先将确认上传按钮隐藏，得到视频时长后才开放
		                }
		                clearTimeout(timer);
		            },1000);
		        });
			 },
			done : function(data) {
				//如果上传失败
				layer.msg(data.msg);
				if (data.code == 200) {
					setTimeout(function() {
						location.replace(location.href);
					}, 1000);
				}
				//上传成功
			},
			error : function() {
				//演示失败状态，并实现重传
				var demoText = $('#demoText');
				demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
				demoText.find('.demo-reload').on('click', function() {
					uploadInst.upload();
				});
			}
		});
				
		function keepTwoDecimal(num) {
		    var result = parseFloat(num);
		    result = Math.round(num * 100) / 100;
		    return result;
		}

	})
	</script>
	<!-- 修改图片 -->
	<script type="text/javascript">
		layui.use(['upload','element','layer'],function() {
			var upload = layui.upload,element = layui.element,layer = layui.layer;

			//普通图片上传
			var uploadInst = upload.render({
				elem : '#test3',
				url : 'updMoviePic' //改成您自己的上传接口
				,
				accept : 'image',
				field : 'uploadPic',
				auto : false,
				bindAction : '#test5',
				xhr : xhrOnProgress,
				progress : function(value) {//上传进度回调 value进度值
					console.log("进度" + value);
					element.progress('demo3progress',value + '%')//设置页面进度条
				},
				before : function(obj) {
					this.data = {
						movieid : $("#picmovieid").val(),
					}
				},
				choose : function(obj) {
					//预读本地文件示例，不支持ie8
					obj.preview(function(index,file, result) {
						$('#demo3').attr('src',result); //图片链接（base64）
					});
				},
				done : function(data) {
					//如果上传失败
					layer.msg(data.msg);
					if (data.code == 200) {
						setTimeout(function() {
							location.replace(location.href);
						}, 1000);
					}
					//上传成功
				},
				error : function() {
					//演示失败状态，并实现重传
					var demoText = $('#demoText');
					demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
					demoText.find('.demo-reload').on('click', function() {uploadInst.upload();});
				}
			});

		})
	</script>

	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

	<script>
		//JavaScript代码区域
		layui.use('element', function() {
			var element = layui.element;

		});
		var isShow = true; //定义一个标志位
		$('.kit-side-fold').click(function() {
			//选择出所有的span，并判断是不是hidden
			$('.layui-nav-item span').each(function() {
				if ($(this).is(':hidden')) {
					$(this).show();
				} else {
					$(this).hide();
				}
			});
			//判断isshow的状态
			if (isShow) {
				$('.layui-side.layui-bg-black').width(60); //设置宽度
				$('.kit-side-fold i').css('margin-right', '70%'); //修改图标的位置
				//将footer和body的宽度修改
				$('.layui-body').css('left', 60 + 'px');
				$('.layui-footer').css('left', 60 + 'px');
				//将二级导航栏隐藏
				$('dd span').each(function() {
					$(this).hide();
				});
				//修改标志位
				isShow = false;
			} else {
				$('.layui-side.layui-bg-black').width(200);
				$('.kit-side-fold i').css('margin-right', '10%');
				$('.layui-body').css('left', 200 + 'px');
				$('.layui-footer').css('left', 200 + 'px');
				$('dd span').each(function() {
					$(this).show();
				});
				isShow = true;
			}
		});
	</script>
</body>
</html>